<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>设备管理</title>
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="${ctx}/css/ui.jqgrid.css" />
        <#include "${ctx}/common.ftl"/>
	</head>
<body>    
		<div class="main-container" id="main-container">
			<div class="main-container-inner">				              
				<div class="main-content">					
					<div class="page-content">
						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<div class="row ">
                                    <div class="col-xs-12">
                                        <h3 class="header smaller lighter blue">设备列表</h3>
                                        <div class="form-group">
                                                                                                                            设备名称：<input id="name" name="name" type="text"/> <button class="btn btn-xs btn-primary" onclick="search();"><i class="fa fa-search"></i>&nbsp;查询</button>
                                        </div>                                    
                                    </div>
								</div>
                                <div class="space-6"></div>
                                <div class="table-responsive">
                                    <table id="grid-table-school"></table>
        							<div id="grid-pager-school"></div>
                                </div>

							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->
				</div><!-- /.main-content -->
			</div><!-- /.main-container-inner -->

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="icon-double-angle-up icon-only bigger-110"></i>
			</a>
		</div><!-- /.main-container -->
		
		
		
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							设备注册
						</h4>
					</div>
					<div class="modal-body">									        
                         <label class="textbox-label textbox-label-before" style="width:150px">设备类型</label>                     
                         <select id="deviceType" name="deviceType" style="width:50%">
                               <#list list as deviceType>
                                    <option value="${deviceType.id}">${deviceType.name}</option>
                               </#list>
                          </select>
                         <br/>

					</div>
					<div class="modal-footer" >
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
						</button>
						<button type="button" id="registerInfo" class="btn btn-primary">
							确定
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
		
		
		<!-- inline scripts related to this page -->		
		<script type="text/javascript">
        jQuery(function ($) {
        var grid_selector = "#grid-table-school";
        var pager_selector = "#grid-pager-school";
        jQuery(grid_selector).jqGrid(({
            url:'${ctx}/device/getList',
            datatype: "json",
            height: 350,
            width:"100%",
            autowidth:true,
            shrinkToFit: true,
            //json数据解析           
            jsonReader: {
                root: 'data.list',
                page: "data.page.page",
                total: "data.page.total",
                records: "data.page.records",
                repeatitems: false,
            },
            colNames: [' ','设备名称','序列号','在线状态','设备类别','软件版本','硬件版本','IP地址','上报周期','上线时间','创建日期'],
            colModel: [
                {name: 'id', index: 'id', width: 60, sorttype: "int",hidden:true},
                {name: 'devName', index: 'devName', width: 200, sorttype: "string",hidden:false},
                {name: 'serialNumber', index: 'serialNumber', width: 200, edittype: "string", hidden:false},
                {name: 'connectionStatus', index: 'connectionStatus', width: 200, hidden:false,formatter:function(cellvalue, options, row){
	                     if(cellvalue=="connected"){
	                      	return '<img src="${ctx}/image/online.gif"/>';
	                     }else{
	                     	return '<img src="${ctx}/image/offline.gif"/>';
	                     }
                     
                     }},  
                {name: 'cpeType', index: 'cpeType', width: 120, edittype: "string", hidden:false},
                {name: 'softwareVersion', index: 'softwareVersion', width: 180, edittype: "string", hidden:true},
                {name: 'hardwareVersion', index: 'hardwareVersion', width: 180, edittype: "string", hidden:false},
                {name: 'ipAddr', index: 'ipAddr', width: 150, edittype: "string", hidden:false},           
                {name: 'periodInformInterval', index: 'periodInformInterval', width: 120, edittype: "string", hidden:false},
                {name: 'lastContact', index: 'lastContact', width: 200, edittype: "string",hidden:false,formatter:function(cellvalue, options, row){return new Date(cellvalue).toLocaleString()}},  
                {name: 'createDate', index: 'createDate', width: 200, edittype: "string",hidden:false,formatter:function(cellvalue, options, row){return new Date(cellvalue).toLocaleString()}}
            ],
            ondblClickRow:function(){
                $("#updateBtn").trigger("click");
            },
            viewrecords: true,
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: pager_selector,
            altRows: true,
            multiselect: true,
            multiboxonly: true,
            caption: "查询列表"
        }));
        	
        $(window).triggerHandler('resize.jqGrid');

        $(window).on('resize.jqGrid', function () {
            $(grid_selector).jqGrid('setGridWidth', $(".page-content").width());
        });

        //添加按钮
        var gridTools = $(grid_selector).jqGrid("navGrid", "#grid-pager-school", {edit: false, add: false, del: false, search: false, refresh: false, view: false});
        gridTools.jqGrid("navButtonAdd", "#grid-pager-school", {
            id: "addCase",
            caption: "<button id='registerBtn' class='btn btn-xs btn-primary'>注册</button>",
            buttonicon: "none"
        });
        // 注册
        $("#registerBtn").click(function () {
            var selrArray = jQuery(grid_selector).jqGrid('getGridParam', 'selarrrow');
            if(selrArray.length>0){    
                $('#myModal').modal('show');      	                        
            } else {
                  alert("请选择您要注册的设备");
            }      
        });
       // 注册
        $("#registerInfo").click(function () {
            //获取模态框数据
			var deviceType = $('#deviceType').val();
	        var selrArray = jQuery(grid_selector).jqGrid('getGridParam', 'selarrrow');
	        if(selrArray.length>0){    
	                var idList= new Array();
	                for(var i=0; i< selrArray.length; i++){
	                    var ret = jQuery(grid_selector).jqGrid('getRowData', selrArray[i]);                           
	                    idList[i]=ret.id;
	                }
		            $.ajax({
	   	    		   type: "POST",
	   	    		   dataType: "json",
	   	    		   url: "${ctx}/device/register",
	   	    		   data: "ids=" + idList + "&typeId=" + deviceType,
	   	    		   success: function(msg){
		   	    			$("#myModal").modal('hide');  
	   	    		   }
	   	    		});			      
	            } else {
	                  alert("请选择您要注册的设备");
	         } 
        }); 
     
        
        
        
       
        
     });
	</script>
</body>
</html>
